<template>
    <!--oncontextmenu="return false" onselectstart="return false"-->
    <div id="app">
        <header class="video_box center">
            <div class="model"><img class="pos_center" src="@/assets/img/advertisement.png" width="340" height="250"
                                    alt=""></div>
            <!--<video width="100%" src="@/assets/9园区道路交通片压.mp4" autoplay loop muted="true" controls="controls"></video>-->
        </header>
        <router-view @login="handleLogin"/>
    </div>
</template>
<script>
  import ReconnectingWebSocket from 'reconnecting-websocket'

  export default {
    data () {
      return {
        input: '',
        isError: false,
        qrCodeTake: true,
        phoneTake: false,
        actBtn: false,
        time: 60,
        qrCode: '',
        imgSrc: '',
        initTimer: Object,
        rws: null,
      }
    },
    created () {
      this.initWebSocket()
      window.longPress = function () {
        console.log('longPress')
      }
    },
    destroyed () {
      if (this.rws != null)
        this.rws.close()
    },
    mounted () {
      this.initTimer = () => {
        this.$children[0].initTimer()
      }
    },
    methods: {
      handleLogin () {
        if (this.rws == null)
          this.initWebSocket()
      },
      initWebSocket: function () {
        const cabinetId = localStorage.getItem('cabinetId')
        if (cabinetId) {
          let ws_url = `${this.$global.WS_API}cabBoxCloseSocket/${cabinetId}`
          // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
          this.rws = new ReconnectingWebSocket(ws_url)
          this.rws.addEventListener('open', () => {
            this.rws.send('hello!')
          })
          this.rws.addEventListener('message', (e) => {
            let boxCode = e.data
            let success = (res) => {
              if (res === 'false') {
                this.closeBox(boxCode)
              }
            }
            let error = (res) => {

            }
            let boxMac = this.$boxConfig[boxCode]
            window.cordova.plugins.CabinetPlugin.sendQueryCommand(boxMac, success, error)
          })
        }
      },
      closeBox (boxCode) {
        this.$axios.post('cabLoginRest/closeBox', {
          boxCode: boxCode,
        })
      },
    },
  }
</script>
<style lang="scss">
    #app {
        height: 100vh;
        box-sizing: border-box;
        padding-top: 6rem;

        > div {
            height: calc(100vh - 7rem);
            background-color: #ffffff;
        }
        .video_box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6.00rem;
            /*border-bottom:1px solid #ccc */
            .model {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                z-index: 11;
                img{
                    width:100%;
                    height:100%;
                }
            }
        }
    }

</style>
